<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特征库上传测试工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            padding: 30px;
        }

        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 28px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 600;
        }

        input[type="text"],
        input[type="file"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        input[type="text"]:focus,
        input[type="file"]:focus {
            outline: none;
            border-color: #667eea;
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 30px;
        }

        button {
            flex: 1;
            padding: 14px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            background: #f0f0f0;
            color: #333;
        }

        .btn-secondary:hover {
            background: #e0e0e0;
        }

        .result {
            margin-top: 30px;
            padding: 20px;
            border-radius: 6px;
            display: none;
        }

        .result.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }

        .result.error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }

        .result h3 {
            margin-bottom: 10px;
            font-size: 18px;
        }

        .result pre {
            background: rgba(0,0,0,0.05);
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            font-size: 12px;
            line-height: 1.5;
        }

        .preview {
            margin-top: 20px;
            text-align: center;
        }

        .preview img {
            max-width: 100%;
            max-height: 300px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .loading {
            display: none;
            text-align: center;
            margin-top: 20px;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .info-box {
            background: #e7f3ff;
            border-left: 4px solid #2196F3;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .info-box p {
            margin: 5px 0;
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎭 特征库上传测试工具</h1>
        <p class="subtitle">SmartCabinet Feature Upload API Tester</p>

        <div class="info-box">
            <p><strong>📡 服务器地址：</strong><span id="serverUrl">http://192.168.31.154:8080</span></p>
            <p><strong>📋 API端点：</strong>/api/features/upload</p>
            <p><strong>💡 提示：</strong>请确保服务器正在运行，并且设备在同一局域网内</p>
        </div>

        <form id="uploadForm">
            <div class="form-group">
                <label for="serverAddress">服务器地址</label>
                <input type="text" id="serverAddress" value="http://192.168.31.154:8080" 
                       placeholder="例如: http://192.168.1.100:8080">
            </div>

            <div class="form-group">
                <label for="userName">用户名称 *</label>
                <input type="text" id="userName" required 
                       placeholder="请输入用户名称，例如：张三">
            </div>

            <div class="form-group">
                <label for="imageFile">选择图片 *</label>
                <input type="file" id="imageFile" accept="image/*" required>
            </div>

            <div class="preview" id="preview"></div>

            <div class="button-group">
                <button type="submit" class="btn-primary">📤 上传特征</button>
                <button type="button" class="btn-secondary" onclick="testConnection()">🔍 测试连接</button>
            </div>
        </form>

        <div class="loading" id="loading">
            <div class="spinner"></div>
            <p style="margin-top: 10px; color: #666;">正在上传...</p>
        </div>

        <div class="result" id="result"></div>
    </div>

    <script>
        // 图片预览
        document.getElementById('imageFile').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById('preview');
                    preview.innerHTML = `<img src="${e.target.result}" alt="预览图片">`;
                };
                reader.readAsDataURL(file);
            }
        });

        // 更新服务器地址显示
        document.getElementById('serverAddress').addEventListener('input', function(e) {
            document.getElementById('serverUrl').textContent = e.target.value;
        });

        // 测试连接
        async function testConnection() {
            const serverAddress = document.getElementById('serverAddress').value;
            const resultDiv = document.getElementById('result');
            
            try {
                resultDiv.style.display = 'block';
                resultDiv.className = 'result';
                resultDiv.innerHTML = '<h3>🔄 正在测试连接...</h3>';

                const response = await fetch(`${serverAddress}/api/features`, {
                    method: 'GET'
                });

                if (response.ok) {
                    const data = await response.json();
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = `
                        <h3>✅ 连接成功！</h3>
                        <p>服务器响应正常，当前特征数量：${data.data.totalCount}</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                } else {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `
                    <h3>❌ 连接失败</h3>
                    <p>${error.message}</p>
                    <p><strong>请检查：</strong></p>
                    <ul style="margin-left: 20px; margin-top: 10px;">
                        <li>服务器是否正在运行</li>
                        <li>服务器地址是否正确</li>
                        <li>设备是否在同一局域网内</li>
                        <li>防火墙是否阻止了连接</li>
                    </ul>
                `;
            }
        }

        // 上传表单
        document.getElementById('uploadForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            const serverAddress = document.getElementById('serverAddress').value;
            const userName = document.getElementById('userName').value;
            const imageFile = document.getElementById('imageFile').files[0];
            const resultDiv = document.getElementById('result');
            const loadingDiv = document.getElementById('loading');

            if (!userName || !imageFile) {
                alert('请填写所有必填项！');
                return;
            }

            try {
                // 显示加载状态
                loadingDiv.style.display = 'block';
                resultDiv.style.display = 'none';

                // 将图片转换为Base64
                const base64Image = await fileToBase64(imageFile);

                // 构建请求数据
                const requestData = {
                    name: userName,
                    imageBase64: base64Image
                };

                // 发送请求
                const response = await fetch(`${serverAddress}/api/features/upload`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestData)
                });

                // 隐藏加载状态
                loadingDiv.style.display = 'none';

                const data = await response.json();

                if (response.ok && data.success) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = `
                        <h3>✅ 上传成功！</h3>
                        <p><strong>用户名称：</strong>${data.data.name}</p>
                        <p><strong>图片路径：</strong>${data.data.imagePath || '无'}</p>
                        <p><strong>特征路径：</strong>${data.data.featurePath || '无'}</p>
                        <p><strong>消息：</strong>${data.data.message}</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                } else {
                    throw new Error(data.message || '上传失败');
                }
            } catch (error) {
                loadingDiv.style.display = 'none';
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `
                    <h3>❌ 上传失败</h3>
                    <p>${error.message}</p>
                    <p><strong>可能的原因：</strong></p>
                    <ul style="margin-left: 20px; margin-top: 10px;">
                        <li>服务器连接失败</li>
                        <li>图片格式不支持</li>
                        <li>用户名称包含特殊字符</li>
                        <li>服务器内部错误</li>
                    </ul>
                `;
            }

            resultDiv.style.display = 'block';
        });

        // 将文件转换为Base64
        function fileToBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.onerror = reject;
                reader.readAsDataURL(file);
            });
        }
    </script>
</body>
</html>
